<div aria-sort="{{col.sort.direction == asc ? 'ascending' : ( col.sort.direction == desc ? 'descending' : (!col.sort.direction ? 'none' : 'other'))}}"
     ng-class="{ 'sortable': sortable }"
     role="columnheader"
     ui-grid-one-bind-aria-labelledby-grid="col.uid + '-header-text ' + col.uid + '-sortdir-text'">
  <div class="ui-grid-cell-contents ui-grid-header-cell-primary-focus" col-index="renderIndex" role="button"
       tabindex="0" title="TOOLTIP"><span ui-grid-one-bind-id-grid="col.uid + '-header-text'">{{ col.displayName CUSTOM_FILTERS }}</span>
    <span aria-label="{{getSortDirectionAriaLabel()}}" ui-grid-one-bind-id-grid="col.uid + '-sortdir-text'"
          ui-grid-visible="col.sort.direction"><i
            aria-hidden="true"
            ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }"
            title="{{col.sort.priority ? i18n.headerCell.priority + ' ' + col.sort.priority : null}}">&nbsp;</i></span>
  </div>
  <div aria-haspopup="true" class="ui-grid-column-menu-button"
       ng-class="{'ui-grid-column-menu-button-last-col': isLastCol}" ng-click="toggleMenu($event)"
       ng-if="grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false"
       role="button" tabindex="0"
       ui-grid-one-bind-aria-label="i18n.headerCell.aria.columnMenuButtonLabel"
       ui-grid-one-bind-id-grid="col.uid + '-menu-button'"><i
          aria-hidden="true" class="ui-grid-icon-angle-down">&nbsp;</i></div>
  <div ui-grid-filter></div>
</div>
